<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
 <!--  <head>
    <title>Hello World Thymeleaf!!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  <body>
  	<img  alt="logo标识" th:src="${context+'/sbdstatic/pictures/logo.png'}"/> 
    <p th:text="${hello}">Hello World Thymeleaf Offline!!</p>
  </body>
</html> -->
<head>
    <title>Hello WebSocket</title>
    <script th:src="${context+'/sbdstatic/js/sockjs-1.1.1.js'}"/>
    <script th:src="${context+'/sbdstatic/js/stomp-2.3.3.js'}"/>
    <script th:inline="javascript">  
        var stompClient = null;
 
        function setConnected(connected) {
            document.getElementById('connect').disabled = connected;
            document.getElementById('disconnect').disabled = !connected;
            document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
            document.getElementById('response').innerHTML = '';
        }
 
        function connect() {
        	var context = /*[[${context}]]*/;
            var socket = new SockJS(context+'/sbdwebsocket');
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function(frame) {
                setConnected(true);
                console.log('Connected: ' + frame);
                stompClient.subscribe('/topic/greetings', function(greeting){
                    showGreeting(JSON.parse(greeting.body).content);
                });
            });
        }
 
        function disconnect() {
            stompClient.disconnect();
            setConnected(false);
            console.log("Disconnected");
        }
 
        function sendName() {
            var name = document.getElementById('name').value;
            stompClient.send("/app/sbdwebsocket", {}, JSON.stringify({ 'name': name }));
        }
 
        function showGreeting(message) {
            var response = document.getElementById('response');
            var p = document.createElement('p');
            p.style.wordWrap = 'break-word';
            p.appendChild(document.createTextNode(message));
            response.appendChild(p);
        }
    </script>
</head>
<body>
<noscript><h2 style="color: #ff0000">似乎你的浏览器不支持Javascript!Websocket依赖Javascript才能启用。请启用Javascript并重新加载这个页面!</h2></noscript>
<div>
    <div>
        <button id="connect" onclick="connect();">连接</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">断开</button>
    </div>
    <div id="conversationDiv">
        <label>你的名称?</label><input type="text" id="name" />
        <button id="sendName" onclick="sendName();">发送</button>
        <p id="response"></p>
    </div>
</div>
</body>
</html>
